<template>
  <div class="footer">
    <div>
      <i
        class="iconfont"
        :class="{ in: '/goods' === $route.path }"
        @click="upto('/goods')"
        >&#xe638;</i
      >
    </div>
    <div>
      <i
        class="iconfont"
        :class="{ in: '/index' === $route.path }"
        @click="upto('/index')"
        >&#xe613;</i
      >
    </div>
    <div>
      <i
        class="iconfont"
        :class="{ in: '/friend' === $route.path }"
        @click="upto('/friend')"
        >&#xe7bb;</i
      >
    </div>
    <div>
      <i
        class="iconfont"
        :class="{ in: '/person' === $route.path }"
        @click="upto('/person')"
        >&#xe619;</i
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    upto(path) {
      this.$router.replace(path);
    }
  }
};
</script>

<style>
.footer {
  width: 100%;
  height: 3.4rem;
  background-color: #ffffff;
  border-top: 1px solid #cdc4c43d;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
}
.footer div {
  width: 10rem;
  height: 3rem;
  margin: 4px;
}
.footer div i {
  font-size: 32px;
  color: #c8ced1e3;
}
.a_link {
  text-decoration: none;
}
.in {
  color: red !important;
}
</style>
